<template>
  <!-- Main Header -->
  <header class="main-header">
    <!-- Logo -->
    <a href="/" class="logo">
      <!-- mini logo for sidebar mini 50x50 pixels -->
      <span class="logo-mini">
        <b>N</b>B</span>
      <!-- logo for regular state and mobile devices -->
      <span class="logo-lg">
        <b>NB</b>center</span>
    </a>
  
    <!-- Header Navbar -->
    <nav class="navbar navbar-static-top" role="navigation">
      <!-- Sidebar toggle button-->
      <a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
        <span class="sr-only">Toggle navigation</span>
      </a>
      <!-- Navbar Right Menu -->
      <div class="navbar-custom-menu">
        <ul class="nav navbar-nav">
  
          <!-- User Account Menu -->
          <li class="dropdown user user-menu">
            <!-- Menu Toggle Button -->
            <a href="#" class="dropdown-toggle profile-panel-toggle" data-toggle="dropdown">
              <!-- The user image in the navbar-->
              <img :src=avatar class="user-image" alt="User Image">
              <!-- hidden-xs hides the username on small devices so only the image appears. -->
              <span class="hidden-xs">{{email}}</span>
            </a>
            <ul class="dropdown-menu profile-panel">
              <!-- The user image in the menu -->
              <li class="user-header">
                <router-link to="/profile"><img :src="avatar" class="img-circle" alt="User Image"></router-link>
  
                <p>
                  {{email}}
                  <small>{{last_login}}</small>
                </p>
              </li>
              <!-- Menu Footer-->
              <li class="user-footer">
                <div class="pull-right">
                  <a class="btn btn-default btn-flat btn-logout" @click="logout">注销登录</a>
                </div>
              </li>
            </ul>
          </li>
          <!-- Control Sidebar Toggle Button -->
        </ul>
      </div>
    </nav>
  </header>
</template>

<script>
import { mapState } from 'vuex';
export default {
  name: 'header',
  computed: mapState({
    email: state => state.auth.email,
    last_login: state => state.auth.last_login,
    avatar: state => state.auth.avatar,
  }),
  methods: {
    logout() {
      this.$store.dispatch('logout').then(() => {
        this.$router.push({path: '/login'});
      }).catch(err => {
        console.warn(err);
        this.$router.push({path: '/login'});
      });
      this.close_notification();
    }
  },
  data: function () {
    return {
      userName: this.$store.getters.userName,
    }
  }
}
</script>
